<style>
    .faceBox {
        position: relative;
        clear: both;
        width: 435px;
        overflow: hidden;
        background: url('${base}/static/img/faceicon.png') no-repeat;
        cursor: pointer;
    }

    .faceBox a {
        display: block;
        float: left;
        width: 28px;
        height: 28px;
        border-right: 1px solid #DFE6F6;
        border-bottom: 1px solid #DFE6F6
    }

    .facePreview {
        clear: both;
        position: absolute;
        top: 0;
        right: 1px;
        width: 53px;
        height: 53px;
        padding: 1px;
        text-align: center;
        border: 1px solid #DFE6F6;
        background: #008AFF;
    }

    .facePreview div {
        padding-top: 6px;
        border: 1px solid #E5F3FF;
        background: #fff;
    }

    .facePreview p {
        display: block !important;
        height: 28px;
        overflow: hidden;
    }

    .facePreview .faceName {
        height: 17px;
        color: #999;
        line-height: 19px;
        background: #F1F1F1;
    }

    .faceWrap a.borderRightNone {
        border-right: none;
        margin-right: 0px;
    }

    .faceWrap a.borderBottomNone {
        border-bottom: none;
    }

    .faceWrap {
        zoom:1;
        outline:none;
        display:none;
        position:absolute;
        top:300px;
        left:74px;
        z-index:99999;
        background-color: #FFF;
        width: 434px;
        border: 1px solid #9FA0A0;
        padding: 10px;
        margin-bottom: 10px;
        _height: 172px;
        overflow-y: hidden;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
        -o-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
        -webkit-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
        -ms-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
        box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
    }
</style>
<div class="easyui-panel" data-options="fit:true,border:0" style="width:80%;padding: 40px 80px;">
    <div class="form-row">
        <div class="alert-info">
            <div class="alert-icons"></div>
            <b>用户订阅公众号回复的消息内容</b>
        </div>
    </div>
    <form id="mpSettingForm" name="mpSettingForm" action="${base}/admin/wechat/updateWelcomeSent.do" method="POST">
        <input name="mpId" id="mpId" type="hidden">
        <div  class="form-row">
            <label class="label-top">关注后回复的消息:</label>
            <input name="welcome" id="welcome" class="easyui-textbox theme-textbox-radius"  style="width:100%; height:100px;" data-options="multiline:true">
            <a id="addFaceBtn" href="#">
                添加表情
                <img style="margin-left: 1px;margin-top: 8px;vertical-align:bottom;" title="添加表情"
                     src="${base}/static/img/weixin_face.jpg"/>

            </a>
        </div>
        <input id="log" name="log" value="关注公众号后的回复消息" type="hidden" />
    </form>
</div>

<div class="faceWrap" hidefocus="true" tabindex="0">
    <div click="chooseEmoji" style="" class="faceBox">
        <a href="javascript:;" onclick="faceSel(this);" class="f14" title="微笑"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f1" title="撇嘴"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f2" title="色"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f3" title="发呆"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f4" title="得意"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f5" title="流泪"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f6" title="害羞"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f7" title="闭嘴"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f8" title="睡"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f9" title="大哭"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f10" title="尴尬"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f11" title="发怒"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f12" title="调皮"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f13" title="呲牙"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f0 borderRightNone" title="惊讶"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f15" title="难过"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f16" title="酷"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f96" title="冷汗"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f18" title="抓狂"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f19" title="吐"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f20" title="偷笑"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f21" title="愉快"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f22" title="白眼"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f23" title="傲慢"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f24" title="饥饿"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f25" title="困"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f26" title="惊恐"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f27" title="流汗"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f28" title="憨笑"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f29 borderRightNone" title="悠闲"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f30" title="奋斗"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f31" title="咒骂"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f32" title="疑问"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f33" title="嘘"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f34" title="晕"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f35" title="疯了"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f36" title="衰"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f37" title="骷髅"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f38" title="敲打"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f39" title="再见"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f97" title="擦汗"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f98" title="抠鼻"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f99" title="鼓掌"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f100" title="糗大了"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f101 borderRightNone" title="坏笑"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f102" title="左哼哼"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f103" title="右哼哼"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f104" title="哈欠"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f105" title="鄙视"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f106" title="委屈"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f107" title="快哭了"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f108" title="阴险"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f109" title="亲亲"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f110" title="吓"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f111" title="可怜"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f112" title="菜刀"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f89" title="西瓜"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f113" title="啤酒"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f114" title="篮球"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f115 borderRightNone" title="乒乓"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f60" title="咖啡"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f61" title="饭"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f46" title="猪头"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f63" title="玫瑰"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f64" title="凋谢"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f116" title="嘴唇"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f66" title="爱心"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f67" title="心碎"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f53" title="蛋糕"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f54" title="闪电"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f55" title="炸弹"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f56" title="刀"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f57" title="足球"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f117" title="瓢虫"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f59 borderRightNone" title="便便"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f75" title="月亮"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f74" title="太阳"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f69" title="礼物"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f49" title="拥抱"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f76" title="强"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f77" title="弱"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f78" title="握手"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f79" title="胜利"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f118" title="抱拳"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f119" title="勾引"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f120" title="拳头"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f121" title="差劲"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f122" title="爱你"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f123" title="NO"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f124 borderRightNone" title="OK"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f42 borderBottomNone" title="爱情"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f85 borderBottomNone" title="飞吻"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f43 borderBottomNone" title="跳跳"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f41 borderBottomNone" title="发抖"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f86 borderBottomNone" title="怄火"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f125 borderBottomNone" title="转圈"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f126 borderBottomNone" title="磕头"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f127 borderBottomNone" title="回头"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f128 borderBottomNone" title="跳绳"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f129 borderBottomNone" title="挥手"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f130 borderBottomNone" title="激动"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f131 borderBottomNone" title="街舞"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f132 borderBottomNone" title="献吻"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f133 borderBottomNone" title="左太极"></a>
        <a href="javascript:;" onclick="faceSel(this);" class="f134 borderBottomNone borderRightNone" title="右太极"></a>
        <div class="facePreview" style="display: none;">
            <div>
                <p class="faceImg"></p>
                <p class="faceName"></p>
            </div>
        </div>
    </div>
</div>

<div style="position: absolute;bottom: 0px;left:0px; width:100%; z-index:99">
    <a id="submitBtn" href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:34px;">更新回复语</a>
</div>

<script>

    $(function(){
        reloadFrm('mpSettingForm', '${base}/admin/wechat/getMPInfo.do');

        $('#submitBtn').bind('click', function () {
            submitFrm('mpSettingForm', '更新关注后回复消息');
        });

        $('#addFaceBtn').bind('click', function(){
            var faceImg = $('div[class="faceWrap"]');
            if(faceImg.is(":hidden")){
                faceImg.show();
            }else{
                faceImg.hide();
            }
        });

    });

    function faceSel(faceA){
        var selFaceTitle = $(faceA).attr('title');
        var tmp = $('#welcome').textbox('getValue') + '['+selFaceTitle+']';
        $('#welcome').textbox('setValue', tmp);
        $(faceA).parent().parent().hide();
    }
</script>
